﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=1">
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>简单的vue-router路由应用</title>
    <link href="../css/bootstrap.css"/>
    <link href="../css/bootstrap-theme.css"/>
</head>
<body>
    <h1>简单的vue-router路由应用</h1><br/>

    <div id="app">
        <router-link to="/com1">组件1</router-link>
        <router-link to="/com2">组件2</router-link>

        <router-view></router-view>
    </div>
<script src="../js/jquery-2.2.0.min.js"></script>
<script src="../js/vue-2.5.16.js"></script>
<script src="../node_modules/axios/dist/axios.js"></script>
<script src="../node_modules/lodash/lodash.js"></script>
<script src="../node_modules/vue-router/dist/vue-router.js"></script>

<script>
    const component1 = {
        template:'<h1>组件1</h1>'
    };
    const component2 = {
        template:'<h1>组件2</h1>'
    };
    //把定义好的组件交给路由器
    let route = new VueRouter({
        routes:[
            {path:'/com1',component:component1},
            {path:'/com2',component:component2}
        ]
    });

    var app = new Vue({
        el:'#app',
        router:route,
        data:{

        }
    });
</script>

</body>
</html>